<template>
  <!-- 文章左侧列表 -->
  <div class="blog-list-container" ref="mainContainer" v-loading="isLoading">
    <ul>
      <li v-for="item in data.rows" :key="item.id">
        <div class="thumb" v-if="item.thumb">
          <RouterLink :to="{ name: 'BlogDetail', params: { id: item.id } }">
            <img v-lazy="item.thumb" :alt="item.title" :title="item.title" />
            <!-- 为了实现图片懒加载[先加载预先设定好的一张图, 同时后面还看不见的图片先不加载, 先用设定好的图占位] -->
          </RouterLink>
        </div>
        <div class="main">
          <RouterLink :to="{ name: 'BlogDetail', params: { id: item.id } }">
            <h2>{{ item.title }}</h2>
          </RouterLink>
          <div class="aside">
            <span>日期：{{ formatDate(item.createDate) }}</span>
            <span>浏览：{{ item.scanNumber }}</span>
            <span>评论：{{ item.commentNumber }}</span>
            <span v-if="!item.category">未分类</span>
            <RouterLink
              v-if="item.category"
              :to="{
                name: 'CategoryBlog',
                params: {
                  categoryId: item.category.id,
                },
              }"
              >{{ item.category.name }}</RouterLink
            >
          </div>
          <div class="desc">
            {{ item.description }}
          </div>
        </div>
      </li>
    </ul>
    <!-- 因为正在加载的时候length也是0, 所以需要加上!isLoaing -->
    <Empty v-if="data.rows.length === 0 && !isLoading" />
    <!-- 分页放到这里 -->
    <Pager
      v-if="data.total"
      :current="routeInfo.page"
      :total="data.total"
      :limit="routeInfo.limit"
      :visibleNumber="10"
      @pageChange="handlePageChange"
    />
  </div>
</template>

<script>
import Pager from "@/components/Pager";
import fetchData from "@/mixins/fetchData.js";
import { getBlogs } from "@/api/blog.js";
import { formatDate } from "@/utils";
import mainScroll from "@/mixins/mainScroll.js";
import Empty from "@/components/Empty";
export default {
  mixins: [fetchData({ total: 0, rows: [] }), mainScroll("mainContainer")],
  // 因为要获取的数据的data部分为对象, 所以这里传递{}
  components: {
    Pager,
    Empty,
  },

  // mounted() {
  //   this.$bus.$on("setMainScroll", this.handleSetMainScroll);
  //   this.$refs.mainContainer.addEventListener("scroll", this.handleScroll);
  // },
  // beforeDestroy() { // 因为用destroyed的话mainContainer元素已经被销毁找不到了, 所以这里使用beforeDestroy
  //   this.$bus.$emit("mainScroll");
  //   // 组件销毁之后取消事件
  //   this.$refs.mainContainer.removeEventListener("scroll", this.handleScroll);
  //   this.$bus.$off("setMainScroll", this.handleSetMainScroll);
  // },

  computed: {
    // 从地址栏获取路由信息
    routeInfo() {
      const categoryId = this.$route.params.categoryId || -1; // 若没有分类id则获取所有分类, 这里用-1表示所有
      const page = +this.$route.query.page || 1; // 当前页码
      const limit = +this.$route.query.limit || 10; // 页容量
      return {
        categoryId,
        page,
        limit,
      };
    },
  },
  methods: {
    formatDate,
    async fetchData() {
      // console.log(this.routeInfo);
      const id = this.routeInfo.categoryId;
      const page = this.routeInfo.page;
      const limit = this.routeInfo.limit;
      // console.log("当前id:", id);
      let resp = await getBlogs(page, id === -1 ? limit : 100, id);
      if (id !== -1) {
        // 分类获取文章
        let result = resp.rows.filter((item) => id === item.category.id);
        result = result.slice( // 获取分类下 当前页的文章的数组
          (page - 1) * limit,
          page * limit > result.length
            ? result.length
            : page * limit
        );
        resp = {
          rows: result,
          total: result.length,
        };
      }
      // console.log("结果:", data);
      return resp;
    },
    handlePageChange(newPage) {
      const query = {
        page: newPage,
        limit: this.routeInfo.limit,
      };
      // [修改地址栏地址]跳转到 当前的分类id 当前的页容量 newPage的页码
      if (this.routeInfo.categoryId === -1) {
        // 跳转前的页面没有分类
        // 可以通过给location.href赋值的方式跳转, 但会刷新页面, 所以不采用
        this.$router.push({
          name: "Blog",
          query,
        });
      } else {
        this.$router.push({
          name: "CategoryBlog",
          query,
          params: {
            categoryId: this.routeInfo.categoryId,
          },
        });
      }
    },

    // handleScroll() {
    //   this.$bus.$emit("mainScroll", this.$refs.mainContainer);
    // },
    // handleSetMainScroll(scrollTop) {
    //   this.$refs.mainContainer.scrollTop = scrollTop;
    // },
  },
  watch: {
    // 观察this.$route的变化, 变化后会调用该函数 [路由变化的时候$route会得到一个新的对象, 而不是说只是route的属性发生了变化, 所以可以观察到]
    async $route(newVal, oldVal) {
      // 可以传递两个参数newVal oldVal分别表示新的值和旧的值
      // 如果不需要旧的值, 则可以不传参数, 在函数里直接通过this.$route获取新的值
      this.isLoading = true;
      this.$refs.mainContainer.scrollTop = 0; // 滚动条高度为0
      this.data = await this.fetchData({});
      this.isLoading = false;
    },
    // // 也可以这样写 [只监控page属性的变化]
    // ["$route.query.page"](newVal, oldVal) {
    //   console.log("路由变化了");
    // }
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.blog-list-container {
  line-height: 1.7;
  position: relative;
  padding: 20px;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth; // 平滑滚动
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}
li {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid @gray;
  .thumb {
    flex: 0 0 auto;
    margin-right: 15px;
    img {
      display: block;
      max-width: 200px;
      border-radius: 5px;
    }
  }
  .main {
    flex: 1 1 auto;
    h2 {
      margin: 0;
    }
  }
  .aside {
    font-size: 12px;
    color: @gray;
    span {
      margin-right: 15px;
    }
  }
  .desc {
    margin: 15px 0;
    font-size: 14px;
  }
}
</style>
